<template>
	<view class="container">
		<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
		<view class="u-flex u-row-center zfcg u-m-t-50">
			<image src="../../static/img/zfcg.png"></image>
		</view>
		<view class="u-flex u-row-center fugui u-m-t-20">
			支付成功！
		</view>
		<view class="content">
			<view class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20 ">
					项目名称
				</view>
				<view class="u-flex u-row-start u-m-r-20 xinxi">
					景观园林设计
				</view>
			</view>
			<view class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					支付类型
				</view>
				<view class="u-flex u-row-start u-m-r-20 xinxi">
					工程
				</view>
			</view>
			<view class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					支付金额
				</view>
				<view class="u-flex u-row-start u-m-r-20 xinxi">
					1.8万
				</view>
			</view>

			<view class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					支付比例
				</view>
				<view class="u-flex u-row-start u-m-r-20 xinxi">
					80%
				</view>
			</view>
			<view class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					支付次数
				</view>
				<view class="u-flex u-row-start u-m-r-20 xinxi">
					第5次
				</view>
			</view>
			<view class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					平台佣金
				</view>
				<view class="u-flex u-row-start u-m-r-20 xinxi">
					20%
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				height: 20,
				bgColor: this.$u.color.bgColor,
				marginTop: 20,
				marginBottom: 20,
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	page {
		// padding-bottom: 100rpx;
	}

	.content {
		width: 95%;
		margin: 0 auto;
	}

	.dibu {
		width: 750rpx;
		height: 100rpx;
		background: #F5F5F9;

	}

	.dibu button {
		padding: 30rpx;
		text-align: center;
		height: 54rpx;
		line-height: 4rpx;
		background: #FFFFFF;
		border: 1px solid #B2B2B2;
		white-space: nowrap;
		border-radius: 27rpx;
		font-size: 26rpx;
		color: #888D99;
	}

	.dibu button:active {
		color: #ffffff;
		background: #4B9CFF;
	}

	.zfcg image {
		width: 131rpx;
		height: 131rpx;
	}

	.kaopu {

		font-size: 28rpx;
		color: #0D1D36;
	}

	.riqi {

		font-size: 26rpx;
		color: #9DA2B0;
	}

	.jjfa {
		width: 40rpx;
		height: 7rpx;
		background: #AB61FF;
		border-radius: 4rpx;
	}

	.guangzhou {

		font-size: 32rpx;
		color: #4B9CFF;
	}

	.button {
		width: 156rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		color: #4B9CFF;
		background-color: white;
		border: 1px solid #4B9CFF;
		border-radius: 26rpx;

	}

	.fangan {
		width: 330rpx;
		height: 220rpx;
		border-radius: 20rpx;
		border: 1px solid;

	}

	.xmkk {
		width: 107rpx;
		height: 124rpx;
		text-align: center;
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: 0 bottom;

		text {
			color: #0D1D36;
			width: 70rpx;
			height: 70rpx;
			display: block;
			font-size: 24rpx;
		}
	}

	.detail {

		color: #9DA2B0;
	}

	.fugui {
		font-size: 36rpx;

		color: #64D361;
	}

	.xinxi {

		font-size: 26rpx;
		color: #9DA2B0;
	}

	.touxiang {
		image {
			width: 115rpx;
			height: 132rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	}

	.tdmc {
		width: 115rpx;
		height: 132rpx;
	}



	.content {
		// margin-bottom: 100rpx;

		.rigtfont {
			font-size: 30rpx;
			color: #9EA2B0;
		}

		.kaiqi {
			transform: scale(0.6) !important;
		}
	}
</style>
